import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function BoilingVerdict (props) {
  if (props.celsius >= 100) {
    return <p>水会沸腾</p>;
  }
  return <p>水不会沸腾</p>;
}
const scaleNames = {
  c: '摄氏度',
  f: '华氏度'
};
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange (e) {
    this.props.onTemperatureChange(e.target.value);
  }
  render () {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>请输入温度 {scaleNames[scale]}:</legend>
        <input value={temperature}
          onChange={this.handleChange} />
      </fieldset>
    );
  }
}
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = { temperature: '', scale: 'c' };
  }
  handleCelsiusChange (temperature) {
    this.setState({ scale: 'c', temperature });
  }
  handleFahrenheitChange (temperature) {
    this.setState({ scale: 'f', temperature });
  }
  render () {
    function toCelsius (fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }
    function toFahrenheit (celsius) {
      return (celsius * 9 / 5) + 32;
    }
    function tryConvert (temperature, convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }
    const scale = this.state.scale;// c
    const temperature = this.state.temperature; // 100
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature; // 100
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature; // 212
    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict celsius={parseFloat(celsius)} />
      </div>
    );
  }
}
ReactDOM.render(
  <Calculator />,
  document.getElementById('root')
);
